<template>
  <div :style="{width:'100%',height:'300px'}" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  name: "StaffChart",
  mixins: [resize],
  data() {
    return {
      chart: null,
      staffArr: [], // 员工名字
      staffCount: [] // 员工所带人数
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
    }
  },
  props: ["studentData"],
  created() {
    setTimeout(() => {
      var managerData = [];
      var sum = {};
      for (var i = 0; i < this.studentData.length; i++) {
        var manager = this.studentData[i].manager;
        if (toCom(manager)) {
          managerData.push({ manager: manager });
          sum[manager + "Sum"] = 1;
        } else {
          sum[manager + "Sum"] += 1;
        }
        function toCom(manager) {
          for (var i = 0; i < managerData.length; i++) {
            if (managerData[i].manager === manager) {
              return false;
            }
          }
          return true;
        }
      }
      for (var i in sum) {
        this.staffCount.push(sum[i]);
      }
      for (var i = 0; i < managerData.length; i++) {
        var man = managerData[i].manager;
        this.staffArr.push(man);
      }

      var teacherData = [];
      var sum = {};
      for (var i = 0; i < this.studentData.length; i++) {
        var teacher = this.studentData[i].teacher;
        if (toCom(teacher)) {
          teacherData.push({ teacher: teacher });
          sum[teacher + "Sum"] = 1;
        } else {
          sum[teacher + "Sum"] += 1;
        }
        function toCom(teacher) {
          for (var i = 0; i < teacherData.length; i++) {
            if (teacherData[i].teacher === teacher) {
              return false;
            }
          }
          return true;
        }
      }
      for (var i in sum) {
        this.staffCount.push(sum[i]);
      }
      for (var i = 0; i < teacherData.length; i++) {
        var tea = teacherData[i].teacher;
        this.staffArr.push(tea);
      }
      // 开始绘图数据
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: "category",
          data: this.staffArr
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.staffCount
          }
        ]
      });
    }, 900);
  }
};
</script>